<template>
  <el-calendar ref="calendarRef" v-model="value">
    <template #header>
      <span class="font-size-16px font-bold">{{ dayjs(value).format('YYYY-MM-DD') }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">上一年</el-button>
        <el-button size="small" @click="selectDate('prev-month')">上一个月</el-button>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('next-month')">下一个月</el-button>
        <el-button size="small" @click="selectDate('next-year')">下一年</el-button>
      </el-button-group>
    </template>
  </el-calendar>
</template>

<script lang="ts" setup>
  import type { CalendarDateType, CalendarInstance } from 'element-plus'
  import { ElCalendar, ElButtonGroup, ElButton } from 'element-plus'
  import { ref, watch, watchEffect } from 'vue';  
  import { Column } from '@/seed-application/types';
  import dayjs from 'dayjs'

  const props = defineProps<{column: Column, modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])
  const value = ref<Date>()

  watchEffect(() => emits('update:modelValue', dayjs(value.value).format('YYYY-MM-DD')))
  watch(() => props.modelValue, (val) => value.value = dayjs(val || void 0).toDate(), { immediate: true })

  const calendarRef = ref<CalendarInstance>()
  const selectDate = (val: CalendarDateType) => calendarRef.value.selectDate(val)
</script>
